<template>
    <div class="comm-wrapper ">
        <div class="status-bar" :style="{'height': statusHeight}"></div>
        <div class="header">
            <text class="iconfont headerIcon" @click="back">&#xe601;</text>
            <wxc-searchbar ref="wxc-searchbar"
                    return-key-type="search"
                    class="header_search"
                    @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"></wxc-searchbar>
            <div class="header_right">
                <!-- <text class="ic iconfont">&#xe66a;</text>
                <text class="headerTextSize">天津</text> -->
            </div>
        </div>
        <div>
            <am-tabs v-model="tabIndex" :tabs="['推荐', '品牌', '年份','价格','筛选']" @change="changeTab"/>
        </div>
        <list class='home_content'>
            <cell v-for="(item,key) in carSearchList">
                <caritem :demo="item"></caritem>
            </cell>
            <cell class="cell-button no-order" v-if="carSearchList.length <= 0">
                <image src="bmlocal://assets/acw/wuwangluo.png" class="noOrderImg"></image>
                <text class="noOrderTxt">暂无记录</text>
            </cell>
            <loading class="comm-loading" @loading="onloading" :display="showLoading">
                <loading-indicator class="comm-indicator" v-if="!lastPage"></loading-indicator>
                <text class="comm-indicator-text" >{{loadingText}}</text>
            </loading> 
        </list>
        <div class="side_pop" v-show ="isBandShow" ref="side" @swipe="swipePop">
            <list class="left_list">
                <cell class="cellBrand" v-for="(item, index) in brandList" :ref="item.brandEn + index" @click="selectBand(item)">
                    <div class="list_cont">
                        <text class="list_cont_text">{{item.brandEn}}  </text>
                        <image :src="item.brandPic" v-if="item.brandEn" class="list_cont_img"></image>
                        <text class="list_cont_text">  {{item.name}}</text>
                    </div>
                </cell>
            </list>
            <!-- <list class="left_list_index">
                <cell class="cellBrand_index" v-for="(item, index) in brandIndex" @click="selectIndex(item)">
                    <div class="list_cont_index">
                        <text class="list_cont_label">{{item.label}}</text>
                    </div>
                </cell>
            </list> -->
        </div>
        <wxc-popup width="750"
            height="400"
            :show="isBottomShow"
            @wxcPopupOverlayClicked="popupGetYear"
            pos="bottom">
            <am-date-picker-view
                format="YYYY"
                v-model="searchParam.p_year"
                maxDate=""
                @input="selectDate"
            ></am-date-picker-view>
        </wxc-popup>
        <wxc-popup width="750"
            height="400"
            :show="searchShow"
            @wxcPopupOverlayClicked="popupOverlayLeftClick"
            pos="bottom">
            <list>
                <cell class="cellBrand" v-for="item in priceList" @click="selectPrice(item)">
                    <text class="list_date_text">{{item.label}}</text>
                </cell>
            </list>
        </wxc-popup>
    </div>
</template>
<script>
    import { WxcButton, WxcTabPage, WxcPanItem, Utils, BindEnv, WxcPopup, WxcSearchbar } from 'weex-ui';
    import Config from './config'
    const animation = weex.requireModule('animation')
    import { AmTabs,AmDatePickerView } from 'weex-amui'
    import caritem from '../common/caritem';
    export default {
        components: { WxcButton, WxcTabPage, WxcPanItem, WxcPopup, WxcSearchbar,AmTabs,caritem,AmDatePickerView },
        data () {
            return {
                token: '',
                statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
                isTabView: true,
                needSlider: true,
                searchParam: {
                    p_brand: '',
                    // sellType: 0,
                    p_year: '',
                    price: '',
                    p_color: '',
                    age: '',
                    gas: '',
                    p_model: '',
                    name: '',
                    // isrecom: 0, // 推荐豪车 是1 否 0
                    page: 1,
                    limit: 4,
                    sort: 'p_id',
                    order: 'asc',
                },
                brandList: [],
                selectBrand: '',
                showLoading: 'hide',
                isBottomShow: false,
                isBandShow:false,//品牌选择面板显示隐藏
                searchShow: false,
                priceList: [],
                index: '',
                brandIndex: Config.ABC,
                
                lastPage:false,//是否是最后一页
                limit:10,//分页条数
                carSearchList:[],//车列表的数据
                loadingText:'加载中 ...',
                tabIndex:0,
            }
        },
        created () {
            let vm = this;
            //初始化
            this.getBrandList()
            this.searchPrice()
            //先不考虑筛选返回的情况
            this.$router.getParams().then(resData => {
                // this.$notice.alert({
                //     message:JSON.stringify(resData)
                // })
                this.searchParam.sellType = resData.sellType ? resData.sellType: '';
                this.searchParam.p_brand = resData.p_brand ? resData.p_brand: '';
                this.searchParam.p_color = resData.p_color ? resData.p_color: '';//
                this.searchParam.price = resData.price ? resData.price: '';
                this.searchParam.age = resData.age ? resData.age: '';
                this.searchParam.gas = resData.gas ? resData.gas: '';
                this.searchParam.p_model = resData.p_model ? resData.p_model: '';
                this.searchParam.page = 1;
                this.searchParam.isrecom = 0;
                this.getCarSearchList();
            })
            //筛选列表,默认是全部车辆
            this.getCarSearchList()
        },
        mounted () {
        },
        eros: {
            beforeBackAppear(params) {
                this.searchParam.p_brand = params.p_brand
                // this.searchParam.p_color = params.p_color
                this.searchParam.price = params.price
                this.searchParam.age = params.age
                this.searchParam.gas = params.gas 
                this.searchParam.p_model = params.p_model
                this.searchParam.isrecom = 0
                this.page = 1;
                this.getCarSearchList();
            }
        },
        methods: {

            changeTab (index, value) {
                let vm = this;
                this.searchParam.price = ''
                this.searchParam.isrecom = 0
                this.searchParam.p_brand = ''//暂时不提供组合搜索 都是单一搜搜
                this.searchParam.p_year = '';
                switch (index){
                    case 0:
                        this.getDefaultList();
                        break;
                    case 1:
                        this.showSelectBandSide();
                        break;
                    case 2:
                        this.showYearSelect();
                        break;
                    case 3:
                        this.showPriceSelect();
                        break;
                    case 4:
                        //跳转到更精确的搜索去
                        this.$router.open({
                            name: 'acw.buycar.search',
                            type: 'PUSH'
                        });
                        break;  
                }
                this.tabIndex = index;
                
            },
            // 返回
            back () {
                this.$router.back();
            },
            callPhone (phone) {
                this.$coms.call(phone)
            },
            // 滑动事件
            swipePop (e) {
                if (e.direction == 'right') {
                    this.hideBand()
                }
            },
            hideBand () {
                this.sideAnima(-750, 800);
            },
            sideAnima (trans, time) {
                var sideEl = this.$refs.side;
                animation.transition(sideEl, {
                    styles: {
                        transform: 'translateX(' + -trans + 'px)',
                        transformOrigin: 'right center'
                    },
                    duration: time, //ms
                    timingFunction: 'ease',
                    delay: 0 //ms
                }, function () {
                })
            },
            // 调取侧栏
            showSelectBandSide () {
                this.isBandShow = true;
                this.sideAnima(750, 800);
            },
            showYearSelect(){
                //显示年份选项
                this.isBottomShow = true;
            },
            // 价格筛选          
            searchPrice () {
                this.priceList = [{label: '3万以下', value: 1},
                {label: '3-5万', value: 2},
                {label: '5-8万', value: 3},
                {label: '8-12万', value: 4},
                {label: '12-18万', value: 5},
                {label: '18-24万', value: 6},
                {label: '24-35万', value: 7},
                {label: '35-50万', value: 8},
                {label: '50-100万', value: 9},
                {label: '100万以上', value: 10},]
            },
            
            onloading (event) {
                this.searchParam.page = this.searchParam.page + 1;
                this.$notice.loading.show();
                this.showLoading = 'show';
                if(!this.lastPage) {
                    this.getCarSearchList();
                } 
                setTimeout(() => {
                    this.$notice.loading.hide();
                    this.showLoading = 'hide'
                }, 600)
            },
            
            // 汽车图片
            getCarPic (list) {
                for (let i = 0, len = list.length; i < len; i++) {
                    list[i].headImg = list[i].pPics.split(';')[1]
                }
                return list
            },
            // 封装数据
            dataPack (dataList, name) {
                for (let i = 0, length = dataList.length; i < length; i++) {
                    dataList[i].name = dataList[i][name]
                }
                return dataList
            },
            // 查询汽车品牌
            getBrandList () {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'brand.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {}
                }).then(resData => {
                    // 成功回调
                    if(resData && resData.errno == 0){
                        this.brandList = this.dataPack(resData.data.brandList, 'brandName')
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            },
            selectBand (item) {//根据品牌筛选
                //选择品牌
                this.selectBrand = item
                this.searchParam.p_brand = item.brandId
                this.searchParam.isrecom = 0;
                this.searchParam.price = ''
                this.searchParam.page = 1;//从第一页开始
                this.carSearchList = [];
                this.getCarSearchList();
                this.hideBand();
                this.isBandShow = false;
            },
            selectDate () {//选择年份
                this.searchParam.isrecom = 0
                this.searchParam.page = 1;//从第一页开始
                this.searchParam.p_brand = ''//暂时不提供组合搜索 都是单一搜搜
                this.searchParam.price = ''
                this.carSearchList = [];
                this.getCarSearchList();
            },
            selectPrice (item) {
                this.searchParam.price = item.value
                this.searchShow = false
                this.searchParam.isrecom = 0
                this.searchParam.p_brand = ''//暂时不提供组合搜索 都是单一搜搜
                this.searchParam.p_year = '';
                this.carSearchList = [];
                this.getCarSearchList();
            },
            showPriceSelect(){
                //显示价格选择
                this.searchShow = true;
            },
            popupGetYear() {
                this.searchShow = false
                this.isBottomShow = false
                this.hideBand()
            },
            popupOverlayLeftClick () {
                this.searchShow = false
                this.isBottomShow = false
                this.hideBand()
            },
            wxcSearchbarInputOnInput (e) {
                this.searchParam.name = e.value
                if (this.tabIndex == 0) {
                    this.searchParam.isrecom = 1
                } else {
                    this.searchParam.isrecom = 0
                }
                this.getCarSearchList();
            },

            getDefaultList(){
                //默认推荐列表
                this.searchParam.page = 1;
                this.searchParam.p_brand = '';
                this.searchParam.p_year ='';
                this.getCarSearchList();
            },
            getCarSearchList () {
                this.$notice.loading.show();
                let vm = this;
                var param = this.searchParam;
                // vm.$notice.alert({
                //             message:JSON.stringify(param)
                //         })
                // console.log(JSON.stringify(param))
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'cars.searchCar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: param
                }).then(resData => {
                    // 成功回调
                    // vm.$notice.alert({
                    //         message:JSON.stringify(resData)
                    //     })
                    this.isShowLoad = false;
                    if(resData && resData.errno == 0){
                        let list = vm.getCarPic(resData.data.items)

                        if(param.page ==1){
                            vm.carSearchList = [];
                        }
                        list.forEach((item, i) => {
                            vm.carSearchList.push(item)
                        });
                    }
                    if(resData.data && this.carSearchList.length >= resData.data.total){
                        this.lastPage = true;
                        this.loadingText = '没有更多'
                    }
                    this.$notice.loading.hide();
                }, error => {
                    // vm.$notice.alert({
                    //         message:JSON.stringify(error)
                    //     })
                    // 错误回调
                    console.log(error)
                })
            },
        }
    }
</script>
<style lang="scss" src='./index.scss'></style>